<template>
    <div class="myinfo" style="height:600px;width:auto;overflow:scroll">
        <img :src="img" style="padding-left: 600px">
        <divider></divider>
        <div>
            <Row class="row">
                <Col span="2">
                    <span>用户名:</span>
                </Col>
                <Col span="10">
                    <Input disabled v-model="username"></Input>
                </Col>
            </Row>
            <divider></divider>
            <Row class="row">
                <Col span="2">
                    <span>性别:</span>
                </Col>
                <Col span="10">
                    <RadioGroup v-model="sex">
                        <Radio label="男" border  v-bind:disabled="isAbleMale"></Radio>
                        <Radio label="女" border  v-bind:disabled="isAbleFemale"></Radio>
                    </RadioGroup>
                </Col>
            </Row>
            <divider></divider>
            <Row class="row">
                <Col span="2">
                    <span>电话:</span>
                </Col>
                <Col span="10">
                    <Input v-bind:disabled="isAbleTel" v-model="tel"></Input>
                </Col>
            </Row>
            <divider></divider>
            <Row class="row">
                <Col span="2">
                    <span>邮箱:</span>
                </Col>
                <Col span="10">
                    <Input v-bind:disabled="isAbleMail" v-model="mail"></Input>
                </Col>
            </Row>
            <divider></divider>
            <Row class="row">
                <Col span="2">
                    <span>收货地址:</span>
                </Col>
                <Col span="10">
                    <Input v-bind:disabled="isAbleAddress" v-model="address"></Input>
                </Col>
            </Row>
            <divider></divider>
            <Row class="row" style="padding-left: 600px">
                <Col span="4">
                    <Button type="primary" v-show="showModify" @click="modify">修改</Button>
                </Col>
                <Col span="4">
                    <Button type="success" v-show="showSave" @click="save">保存</Button>
                </Col>
                <Col span="4">
                    <Button type="error" v-show="showCancel" @click="cancel">取消</Button>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
export default {
    name: 'myinfo',
    data() {
        return {
            img: require('../assets/imgs/user.jpg'),
            isAbleMale: true,
            isAbleFemale: true,
            isAbleTel: true,
            isAbleMail: true,
            isAbleAddress: true,
            username: localStorage.getItem('userName'),
            sex: '',
            tel: '',
            mail: '',
            address: '',
            showModify: true,
            showSave: false,
            showCancel: false,
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            fetch('http://localhost:5000/myinfo', {
                method: 'post',
                body: JSON.stringify({
                    username: localStorage.getItem('userName'),
                }),
            }).then(
                (res) => res.json()
            ).then(
                (res) => {
                    console.log(res)
                    this.username = res.username
                    this.sex = res.sex
                    this.tel = res.tel
                    this.mail = res.mail
                    this.address = res.address
                }
            )
        },
        modify() {
            this.isAbleMale = false
            this.isAbleFemale = false
            this.isAbleTel = false
            this.isAbleMail = false
            this.isAbleAddress = false
            this.showModify = false
            this.showSave = true
            this.showCancel = true
        },
        save() {
            fetch('http://localhost:5000/modifymyinfo', {
                method: 'post',
                body: JSON.stringify({
                    username: this.username,
                    sex: this.sex,
                    tel: this.tel,
                    mail: this.mail,
                    address: this.address,
                }),
                headers: { 'Content-Type': 'application/json' },
            }).then(
                (res) => res.json()
            ).then(
                (res) => {
                    console.log(res)
                    this.init()
                }
            )
            this.isAbleMale = true
            this.isAbleFemale = true
            this.isAbleTel = true
            this.isAbleMail = true
            this.isAbleAddress = true
            this.showModify = true
            this.showSave = false
            this.showCancel = false
        },
        cancel() {
            this.init()
            this.isAbleMale = true
            this.isAbleFemale = true
            this.isAbleTel = true
            this.isAbleMail = true
            this.isAbleAddress = true
            this.showModify = true
            this.showSave = false
            this.showCancel = false
        },
    },
}
</script>

<style>
.row {
    padding-left: 550px;
}
</style>
